// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

/**
 * container of this component should have its own stacking context otherwise
 * fun things will happen
 */
.login-box {
  @_top: login-box;

  position: fixed;
  width: 100%;
  z-index: @z-index--nav-float;
  top: @navbar-height;

  @media @desktop {
    top: @nav2-height;
    transition: top var(--header-pinned-animation-duration);

    .@{header-pinned} & {
      top: @nav2-height--pinned;
    }
  }

  &--landing {
    @media @desktop {
      position: relative;
      top: 0;
    }
  }

  &__content {
    .default-box-shadow();
    .own-layer();
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: @font-size--nav-popup-section;
    overflow: hidden;
    transition: none;
    color: #999;

    @media @desktop {
      .default-border-radius();
      width: 300px;
      margin-top: 5px; // sync with Nav2#centerPopup
    }

    &--captcha {
      @media @desktop {
        width: 342px; // so the captcha box (in dark mode) looks visually as wide as the input boxes
      }
    }
  }

  &__action {
    margin: 5px;
  }

  &__form-input {
    .default-border-radius();
    border: none;
    outline: none;
    background-color: #222;
    padding: 10px 5px;
    margin-bottom: 5px;

    font-size: @font-size--phone-input;

    @media @desktop {
      font-size: inherit;
    }

    &::placeholder {
      color: #777;
    }
  }

  &__link {
    .reset-input();
    color: @yellow;
    font-size: @font-size--nav-popup-link;

    &:focus,
    &:hover {
      text-decoration: none;
      color: #fff;
    }
  }

  &__row {
    flex: none;
    margin: 0 0 10px;
    display: flex;

    &--actions {
      justify-content: flex-end;
      align-items: center;
      white-space: nowrap;
      margin: -5px -5px 5px;
    }

    &--error {
      color: @purple-light;

      &:empty {
        display: none;
      }
    }

    &--inputs {
      flex-direction: column;
      margin-bottom: 5px;
    }

    &--title {
      color: #fff;
      font-size: @font-size--nav-popup-title;
      font-style: normal;
      margin-bottom: 20px;
    }
  }

  &__section {
    flex: none;
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;

    &--login {
      background-color: #333;
    }

    &--register {
      background-color: #444;
    }
  }
}
